<template>
    <div class="container yuan-container system-container">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="yuan-form" v-for="item in typeTpl" :key="item.name">
                <div class="form-title" style="">
                    <span style="flex-grow:1">{{item.name}}</span>
                    <a-button type="primary" @click="add(item.type)"
                        v-if="$utilCheckPermission(['basicsConfigurationAdd'])">新增</a-button>
                </div>
                <div>
                    <template v-for="(child,idx) in pageData">
                        <template v-if="child.type===item.type">
                            <div class="sys-list">
                                <div class="drag-list" :key="child.id" draggable="true" @dragstart="dragType=item.type"
                                    @dragend="dragSort(idx)">
                                    <a-icon class="closeIco" type="close" @click="removeOne(child.id)" />
                                    <div>{{child.content}}</div>
                                </div>
                                <div class="select-box" :class="selectBoxIdx===idx&&'select-box-active'"
                                    @dragenter="setBoxIdx(item.type,idx)"></div>
                            </div>

                        </template>

                    </template>

                </div>
            </div>
        </a-spin>

        <a-modal width="600px" title="新增" :visible="addVisible" @ok="addOk" @cancel="addVisible=false" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="addLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <a-form-model-item label="配置信息" prop="number">
                            <a-input v-model="addInfo" placeholder="请输入配置信息" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    typeTpl = [
        { type: 1, name: "院校名称" },
        { type: 2, name: "课题来源" },
        { type: 3, name: "所属技术类别/细分领域" },
        { type: 4, name: "推广形式" },
        { type: 5, name: "应用行业" },
    ];
    loading = false;
    getList() {}
    addVisible = false;
    addLoading = false;
    addInfo = "";
    addType = 1;
    add(type: number) {
        this.addInfo = "";
        this.addType = type;
        this.addVisible = true;
    }
    async addOk() {
        if (!this.addInfo) {
            this.$message.error("请输入新增配置内容");
            return;
        }
        this.addLoading = true;
        try {
            const res = await api.addSetting([
                {
                    type: this.addType,
                    content: this.addInfo,
                },
            ]);
            this.$message.success("新增成功");
            this.getData();
        } finally {
            this.addLoading = false;
        }
        this.addVisible = false;
    }
    removeOne(id: string) {
        this.$confirm({
            title: "确定要移除改配置吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.loading = true;
                try {
                    const res = await api.delSetting(id);
                    this.$message.success("删除成功");
                    this.getData();
                } finally {
                    this.loading = false;
                }
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    mounted() {
        this.getData();
    }
    pageData: any[] = [];
    async getData() {
        this.loading = true;
        try {
            const res = await api.getSetting("");
            this.pageData = res.data;
        } finally {
            this.loading = false;
        }
    }

    selectBoxIdx: number | "" = "";
    setBoxIdx(type, idx) {
        if (type !== this.dragType) return;
        this.selectBoxIdx = idx;
    }
    dragType = "";
    async dragSort(idx) {
        const a = this.pageData.splice(idx, 1);
        if (this.selectBoxIdx || this.selectBoxIdx === 0) this.pageData.splice(this.selectBoxIdx + 1, 0, a[0]);
        this.selectBoxIdx = "";
        this.dragType = "";
        const newData = this.pageData.map((item, idx) => {
            return {
                ...item,
                sort: idx,
            };
        });
        this.loading = true;
        try {
            const res = await api.addSetting(newData);
            this.getData();
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.system-container {
    .yuan-form {
        max-width: 1000px;
        background-color: #fff;
        padding: 10px 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
    }
    .sys-list {
        width: 200px;
        display: inline-block;
        background-color: #fff;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 6px 10px;
        position: relative;
        border: solid 1px rgb(64, 158, 255);
        border-radius: 4px;
        position: relative;
    }
    .closeIco {
        position: absolute;
        right: -2px;
        top: -2px;
        color: #ff4949;
        cursor: pointer;
    }
    .drag-list {
        position: relative;
        z-index: 2;
    }
    .select-box {
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
    }
    .select-box-active {
        text-align: center;
    }
    .select-box-active::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 100%;
        background-color: rgb(64, 158, 255);
        box-shadow: 1px 1px 5px 1px rgba(64, 158, 255, 0.1);
        transform: translateX(6px) translateY(2px);
    }
}
</style>
